<template>
  <view class="container">
    <z-paging ref="paging" v-model="list" class="notice-list" @query="getlist">
      <!-- 搜索栏 -->
      <template #top>
        <view class="search-wrapper">
          <u-search
            shape="round"
            v-model="keyword"
            @custom="search"
            placeholder="搜索客户"
            :clearabled="true"
            bgColor="#ffffff"
          ></u-search>
        </view>
      </template>

      <!-- 客户列表 -->
      <view class="customer-list">
        <view
          class="customer-card"
          v-for="(item, index) in list"
          :key="index"
          @click="handleTargetDetail(item.id)"
        >
        <!--               // <view class="customer-stats">
                //   <text class="stat-item">手机号: {{}}</text>
                //   <text class="stat-item">身高: {{}}cm</text>
                // </view> -->
          <view class="card-content">
            <view class="customer-info">
              <view class="name-section">
                <text class="name">{{item.compellation || '未知客户'}}</text>
                <view class="gender-tag" :class="{'female': item.sex == 0}">
                  {{item.sex == 1 ? "男" : "女"}}
                </view>
              </view>
              <view class="customer-meta">
                <view class="customer-id">#{{index + 1}}</view>
  
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>




  </view>
</template>

<script>
import {customer,customerAdd} from '../../api/fit'
export default {
  data() {
    return {
      show: false,
      keyword: "",
      list: [],
      form: {
        compellation: '',
        sex: ''
      }
    };
  },
  methods: {
    async getlist(pageNo, pageNum = 10) {
      // 模拟数据，实际项目中替换为真实的API调用
      const mockData = [
        { 
          compellation: '张三',
          sex: 1,
          weight: 70,
          bodyFat: 20,
          waistline: 80
        },
        {
          compellation: '李四',
          sex: 0,
          weight: 65,
          bodyFat: 18,
          waistline: 75
        }
      ];
      const res = await customer()
      
      this.$refs.paging.complete(res.data.list);
    },

    search() {
      this.$refs.paging.reload();
    },

    handleTargetDetail(id) {
      uni.navigateTo({
        url: `/pages/kecheng/plan?id=${id}`
      });
    },

    async addkh() {
      // 实现添加客户的逻辑
      console.log('添加客户:', this.form);
      this.show = false;
      const res = await customerAdd(this.form)
      this.$refs.paging.reload();
    },

    inspect() {
      uni.navigateTo({
        url: '/pages/inspect/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140rpx;
}

.search-wrapper {
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.customer-list {
  padding: 20rpx;
}

.customer-card {
  margin: 20rpx 0;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  transform: translateY(0);
  transition: all 0.3s ease;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1),
              0 1rpx 8rpx rgba(0, 0, 0, 0.06);

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);
  }
}

.card-content {
  padding: 30rpx;
  background: linear-gradient(145deg, #ffffff, #f8f8f8);
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.name-section {
  display: flex;
  align-items: center;
  gap: 20rpx;

  .name {
    font-size: 36rpx;
    font-weight: 600;
    color: #000;
  }

  .gender-tag {
    padding: 4rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background: #000;
    color: #fff;

    &.female {
      background: #333;
    }
  }
}

.customer-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.customer-id {
  font-size: 24rpx;
  color: #999;
  font-weight: 500;
}

.customer-stats {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
  
  .stat-item {
    font-size: 26rpx;
    color: #666;
    background: #f5f5f5;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    
    &:not(:last-child) {
      margin-right: 10rpx;
    }
  }
}

.add-button-wrapper {
  position: fixed;
  bottom: 40rpx;
  right: 30rpx;
  left: 30rpx;
  z-index: 100;
}

.add-button {
  background: #000;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  }

  .button-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    letter-spacing: 2rpx;
  }
}

.modal-content {
  padding: 30rpx;

  .input-group {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;

    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #333;
    }

    .input {
      flex: 1;
      height: 70rpx;
      background: #f5f5f5;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
    }

    .radio-group {
      flex: 1;
    }
  }
}

// 修改搜索框样式
::v-deep .u-search {
  background: #fff !important;
  border: 2rpx solid #eee;
  
  .u-search__content {
    background: #f8f8f8 !important;
  }
}

// 修改radio样式
::v-deep .u-radio {
  margin-right: 30rpx;
  
  .u-radio__icon-wrap {
    color: #000;
    
    &.u-radio__icon-wrap--checked {
      background-color: #000;
      border-color: #000;
    }
  }
}

.inspect-button {
  position: fixed;
  bottom: 180rpx;
  right: 30rpx;
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(145deg, #ffffff, #f8f8f8);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 8rpx 8rpx 20rpx rgba(0, 0, 0, 0.1),
              -4rpx -4rpx 16rpx rgba(255, 255, 255, 0.8);
  z-index: 101;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.1),
                -2rpx -2rpx 8rpx rgba(255, 255, 255, 0.8);
  }
  
  .inspect-icon {
    font-size: 40rpx;
    margin-bottom: 4rpx;
    color: #000;
  }
  
  .inspect-text {
    font-size: 24rpx;
    color: #333;
    font-weight: 500;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -6rpx;
    left: -6rpx;
    right: -6rpx;
    bottom: -6rpx;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,248,248,0.9));
    z-index: -1;
    opacity: 0.6;
  }
}
</style> 